<template>
  <div class="container">
    <div class="header">
      <img class="header-img" :src="edit.headImg ? edit.headImg : require('@/assets/avatar_default.png')" alt="">
      <van-uploader :after-read="afterRead">
        <van-button plain size="small" round icon="photo" type="primary">更换头像</van-button>
      </van-uploader>
    </div>
    <div class="main">
      <van-cell-group>
      <van-field v-model="edit.nickName" label="昵称" placeholder="请输入用户名" />
      <van-field v-model="edit.password" label="密码" placeholder="请输入密码" />
      <van-field v-model="edit.phone" label="手机号" placeholder="请输入手机号" />
    </van-cell-group>
    <van-button type="danger" size="large" @click="onSubmit">提交修改</van-button>
    </div>
    <van-button type="danger" class="role1" size="large" @click="loginout">切换账户</van-button>
  </div>
</template>
<script>
import areaList from '@/common/area'
import { isEmpty } from '@/common/validate'
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      areaList,
      edit: {
        id: '',
        phone: '',
        password: '',
        nickName: '',
        headImg: ''
      }
    }
  },
  created() {
    this.edit.id = this.user.id
    this.edit.phone = this.user.phone
    this.edit.password = this.user.password
    this.edit.nickName = this.user.nickName
    this.edit.headImg = this.user.headImg
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['setUser']),
    /**
     * 退出登录
     */
    loginout() {
      this.setUser({})
      this.$router.push({ path: '/login' })
    },
    onSubmit() {
      if (isEmpty(this.edit.nickName)) {
        this.$toast('昵称不能为空')
        return
      }
      this.$api.auth.discUser(this.edit).then(res => {
        if (res.code === 200) {
          this.$toast.success(res.msg)
          this.setUser(res.data)
          this.$router.go(-1)
        }
      })
    },
    afterRead(file) {
      this.$toast.loading({
        mask: true,
        message: '上传中...',
        duration: 0
      })
      const formData = new FormData()
      formData.append('file', file.file)
      this.$api.auth.uploadOss(formData).then(res => {
        if (res.code === 200) {
          this.edit.headImg = res.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .header{
    height:180px;
    background:linear-gradient(309deg,rgba(255,112,61,1) 0%,rgba(255,70,57,1) 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    &-img{
      width:80px;
      height:80px;
      border-radius:50%;
      overflow:hidden;
    }
  }
  .main{
    margin:-30px 15px 15px 15px;
    border-radius: 8px;
    overflow: hidden;
    background:#fff;
  }
  .group {
  .style-box();
  margin: 0 15px 15px 15px;
  &-inner{
    padding:10px 0;
  }
}
.style-box() {
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
</style>

